﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="referrer" content="no-referrer">
    <link href="css/BigData.css" rel="stylesheet" type="text/css" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <link href="css/index01.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <link href="css/Security_operation.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="js/artDialog/skins/default.css" type="text/css" />
    <script src="js/laydate.js"></script>
    <script src="js/Home_page.js"></script>
    <script src="js/echarts.js"></script>
     <script src="js/index.js"></script>
    <script src="js/bstable/js/bootstrap.min.js"></script>
    <script src="js/bstable/js/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/jquery.pagination.js"></script>
    <script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <!--<script src="js/MainMap.js"></script>-->
    <script src="js/Home_page.js"></script>
    <script src="js/artDialog/artDialog.js"></script>
    <script src="js/artDialog/plugins/iframeTools.source.js"></script>
    <meta charset="UTF-8">
    <title>Bilibili爬虫系统</title>
</head>
<body>
    <div class="data_bodey">
        <div class="index_nav">
            <ul style="height: 30px; margin-bottom: 0px;">
                <li class="l_left total_chose_pl">评论相关</li>
                <li class="r_right total_chose_pl">弹幕相关</li>
            </ul>
            <div class="total_chose_box" >
                <div style="height: 32px;"></div>
                
                <span class="chose_tltle">请输入BV号：</span>
                <input class="chose_text_in" type="text" id="bvid"/>
                <button class="chose_enter" type="button" id="videoInfo">确定</button>
           
            </div>
            <div class="clear"></div>
        </div>
        <div class="index_tabs">       
            
            <div class="inner" style="display: none">
                <div class="manage_left l_left">
                    <!--<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle">
                            	<center><h5>男女比例</h5></center>
                                <center><div id="comment1" style="width: 300px;height:250px"></div></center>
                              </div>
                            <br>
                            <div class="manage_top_middle">
                                
                                <center><div id="comment2" style="width: 400px;height:300px"></div></center>
                            <center><h5>单个视频前五点赞的</h5></center>
                            </div>
                            <!--<div class="manage_top_middle l_left">-->
                            <!--<div id="container5" style="height: 90%"></div>-->
                            <!--<p>天气——游客数据分析</p>-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
                <div class="manage_left l_left">
                    <!--<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle l_left">
                                <center><h5>视频信息</h5></center>
                                <div>
                                	<table id="videotable" style=" border-spacing:10px 1px;"  width="100%">
                                		
                                	</table>
                                </div>
                                
                            </div>
                           <div class="manage_top_middle l_left">
                           	
                            	<br></br>
                                <center><h5>视频数据</h5></center>
                                <center><div id="video" style="width: 300px;height:250px"></div></center>
                          
                            </div>
                        </div>
                    </div>
                </div>
                <div class="manage_left l_left">
                    <!--<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
                    <div class="manage_line1">
                    	<br />
                        <div class="table-a" >
                               <table id="commenttable" style="border-collapse:separate; border-spacing:10px 10px;" >
                            </table>
                        </div>
                    </div>
                </div>
            </div>

 <div class="inner" style="display: none">
                <div class="manage_left l_left">
                    <!--<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle">
                            	<center><h5>弹幕数量前五</h5></center>
                                <center><div id="Sort9" style="width: 300px;height:250px"></div></center>
                 
                            </div>
                            <br>
                            <div class="manage_top_middle">
                                
                                <center><div id="Sort8" style="width: 400px;height:300px"></div></center>
                        
                            <center><h5>弹幕数量随日期的变化</h5></center>
                            </div>
                            <!--<div class="manage_top_middle l_left">-->
                            <!--<div id="container5" style="height: 90%"></div>-->
                            <!--<p>天气——游客数据分析</p>-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
                <div class="manage_left l_left">
                    <!--<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle l_left">
                                <center><h5>视频信息</h5></center>
                                <div>
                                	<table id="videotable2" style=" border-spacing:10px 0px; ">

</table>
                                </div>
                                
                            </div>
                            <div class="manage_top_middle l_left">
                            	
                            	<br></br>
                                <center><h5>视频数据</h5></center>
                                <center><div id="video2" style="width: 300px;height:250px"></div></center>
                            
                            </div>
                        </div>
                    </div>
                </div>
                <div class="manage_left l_left">
                    <!--<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
                    <div class="manage_line1">
                    	<br />
                        <div class="table-a" >
                               <table id="danmutable" style="border-collapse:separate; border-spacing:10px 10px;" >
                                
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
         <script type="text/javascript">
    $(function () {
    	var sexdata = new Array();
    	var sexvalue = new Array();
    	var commentcontent = new Array();
    	var commentcount = new Array();
    	var barragecontent = new Array();
    	var barragecount = new Array();
    	var datatime = new Array();
    	var datanum = new Array();
    	var views;
    	var bvid;
    	var danmaku;
    	var reply;
    	var coin;
    	var favorite;
    	var likes;
    	var integrityurl = window.location.href;
    	getQueryVariable("bvid");
    	selectVideofirst(bvid);
    	selectVideo();
    	
    	
    	
    	function getQueryVariable(variable)
{
       var query =window.location.href;
       var vars = query.split("?");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == "bvid"){
               	bvid = pair[1];
               }
       }
       return(false);
}


function selectVideofirst(bvid) {
    		
 	    		console.log("start");
					console.log(bvid);
					$.ajax({
				    type:"get",
			        url: "http://localhost:8181/hotList/seletBVId?Bvid="+bvid,
		         	contentType: "application/json; charset=utf-8",
		            dataType: 'json',
		            success:function(result){
		            	for(var i = 0;i<=2;i++){
		            		sexdata[i]=result.result.sexSort[i].sex;
		            		sexvalue[i]=result.result.sexSort[i].count;
		            	  }
		            	for(var i = 0;i<=4;i++){
		            		commentcontent[i]=result.result.commentSort[i].content;
		            		commentcount[i]=result.result.commentSort[i].count;
		            		barragecontent[i]=result.result.SortFive[i].content;
		            		barragecount[i]=result.result.SortFive[i].count;
		            	  }
		            	for(var i = 0;i<=11;i++){
		            		datanum[i] = result.result.videoDate[i].num;
		            		datatime[i] = result.result.videoDate[i].time;
    	                    
		            	  }
		            	
		            	views = result.result.video.views;
    	            	danmaku = result.result.video.danmaku;
    	            	reply = result.result.video.reply;
    	            	coin = result.result.video.coin;
    	            	favorite = result.result.video.favorite;
    	            	likes = result.result.video.likes;
		            	comment1();
		            	videonum();
		            	videonum2();
		            	comment2();
		            	barrage1();
		            	barrage2();
		            	$("#videotable").html("<tr><th >排名：</th><td>"+result.result.video.ranks+
		            	"</td></tr><td rowspan='2'><img src='"+result.result.video.pic+
		            	"' width='200'/></th><td>"+result.result.video.title+
		            	"</td></tr><tr><td>"+result.result.video.owner+
		            	"</td></tr>");
		            	$("#videotable2").html("<tr><th >排名：</th><td>"+result.result.video.ranks+
		            	"</td></tr><td rowspan='2'><img src='"+result.result.video.pic+
		            	"' width='200'/></th><td>"+result.result.video.title+
		            	"</td></tr><tr><td>"+result.result.video.owner+
		            	"</td></tr>");
		            	$("#commenttable").html("<tr ><th scope='col' >最新评论</th></tr>");
                    for (var i = 0; i < result.result.commentList.length - 1; i++) {
                            $("#commenttable").append("<tr><td>"+result.result.commentList[i]+"</td></tr>")
                    };
                    $("#danmutable").html("<tr ><th scope='col' >最新弹幕</th></tr>");
                    for (var i = 0; i < result.result.barrageList.length - 1; i++) {
                            $("#danmutable").append("<tr><td>"+result.result.barrageList[i]+"</td></tr>")
                    };
		            }
		        })
			
 	    }

    	
    	function selectVideo() {
    		
 	    	$("#videoInfo").click(function(){
 	    		console.log("start");
					var bvid = $("#bvid").val();
					console.log(bvid);
					$.ajax({
				    type:"get",
			        url: "http://localhost:8181/hotList/seletBVId?Bvid="+bvid,
		         	contentType: "application/json; charset=utf-8",
		            dataType: 'json',
		            success:function(result){
		            	for(var i = 0;i<=2;i++){
		            		sexdata[i]=result.result.sexSort[i].sex;
		            		sexvalue[i]=result.result.sexSort[i].count;
		            	  }
		            	for(var i = 0;i<=4;i++){
		            		commentcontent[i]=result.result.commentSort[i].content;
		            		commentcount[i]=result.result.commentSort[i].count;
		            		barragecontent[i]=result.result.SortFive[i].content;
		            		barragecount[i]=result.result.SortFive[i].count;
		            	  }
		            	for(var i = 0;i<=11;i++){
		            		datanum[i] = result.result.videoDate[i].num;
		            		datatime[i] = result.result.videoDate[i].time;
    	                    
		            	  }
		            	
		            	views = result.result.video.views;
    	            	danmaku = result.result.video.danmaku;
    	            	reply = result.result.video.reply;
    	            	coin = result.result.video.coin;
    	            	favorite = result.result.video.favorite;
    	            	likes = result.result.video.likes;
		            	comment1();
		            	videonum();
		            	videonum2();
		            	comment2();
		            	barrage1();
		            	barrage2();
		            	$("#videotable").html("<tr><th >排名：</th><td>"+result.result.video.ranks+
		            	"</td></tr><td rowspan='2'><img src='"+result.result.video.pic+
		            	"' width='200'/></th><td>"+result.result.video.title+
		            	"</td></tr><tr><td>"+result.result.video.owner+
		            	"</td></tr>");
		            	$("#videotable2").html("<tr><th >排名：</th><td>"+result.result.video.ranks+
		            	"</td></tr><td rowspan='2'><img src='"+result.result.video.pic+
		            	"' width='200'/></th><td>"+result.result.video.title+
		            	"</td></tr><tr><td>"+result.result.video.owner+
		            	"</td></tr>");
		            	$("#commenttable").html("<tr ><th scope='col' >最新评论</th></tr>");
                    for (var i = 0; i < result.result.commentList.length - 1; i++) {
                            $("#commenttable").append("<tr><td>"+result.result.commentList[i]+"</td></tr>")
                    };
                    $("#danmutable").html("<tr ><th scope='col' >最新弹幕</th></tr>");
                    for (var i = 0; i < result.result.barrageList.length - 1; i++) {
                            $("#danmutable").append("<tr><td>"+result.result.barrageList[i]+"</td></tr>")
                    };
		            }
		        })
			})
 	    }
    	
    	function comment1() {
    		var myChart = echarts.init(document.getElementById('comment1'));

      // 指定图表的配置项和数据
      var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        textStyle:{
                            color: '#ffffff'//字体颜色
                        },
        data: sexdata
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: sexvalue[0], name: sexdata[0]},
                {value: sexvalue[1], name: sexdata[1]},
                {value: sexvalue[2], name: sexdata[2]}
            ]
        }
    ]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    	}
    	
    	function comment2() {
    		var myChart = echarts.init(document.getElementById('comment2'));

      // 指定图表的配置项和数据
      var option = {
    xAxis: {
        type: 'category',
        data: commentcontent
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: commentcount,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    	}
    	
    	function videonum(){
    		var myChart = echarts.init(document.getElementById('video'));

      // 指定图表的配置项和数据
    var option = {
    title: {
        text: ''
    },
    tooltip: {},
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '播放量', max: 6000000},
            { name: '弹幕', max: 20000},
            { name: '评论', max: 10000},
            { name: '硬币', max: 100000},
            { name: '收藏', max: 400000},
            { name: '点赞', max: 300000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [views, danmaku, reply, coin, favorite, likes],
                name: '视频数据'
            },
        ]
    }]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    	}
    	
    	function videonum2(){
    		var myChart = echarts.init(document.getElementById('video2'));

      // 指定图表的配置项和数据
      var option = {
    title: {
        text: ''
    },
    tooltip: {},
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '播放量', max: 6000000},
            { name: '弹幕', max: 20000},
            { name: '评论', max: 10000},
            { name: '硬币', max: 100000},
            { name: '收藏', max: 400000},
            { name: '点赞', max: 300000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [views, danmaku, reply, coin, favorite, likes],
                name: '视频数据'
            },
        ]
    }]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    	}
    	
    	function barrage1(){
    		      var myChart = echarts.init(document.getElementById('Sort9'));

      // 指定图表的配置项和数据
      var option = {
    title: {
        text: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        textStyle:{
                            color: '#ffffff'//字体颜色
                        },
        data:barragecontent
    },
    series: [
        {
            name: '弹幕内容',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: barragecount[0], name: barragecontent[0]},
                {value: barragecount[1], name: barragecontent[1]},
                {value: barragecount[2], name: barragecontent[2]},
                {value: barragecount[3], name: barragecontent[3]},
                {value: barragecount[4], name: barragecontent[4]}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    	}
       
        function barrage2(){
        	 var myChart = echarts.init(document.getElementById('Sort8'));

      // 指定图表的配置项和数据
      var option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: datatime
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: datanum,
        type: 'line',
        areaStyle: {}
    }]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
        }
    
    
    })
    
    </script>                       

    
    <script>
        var number;
        $(function () {
            if (window.screen.height <= 768) {
                number = 4;
            } else if (window.screen.height > 768 && window.screen.height <= 900) {
                number = 6
            } else if (window.screen.height > 1080) {
                number = 8
            }
        });


        //    翻页模块
        $(".tcdPageCode").createPage({
            pageCount: 5,
            current: 1,
            backFn: function (p) { }
        });
        $(".chemistry_tcdPageCode").createPage({
            pageCount: 4,
            current: 1,
            backFn: function (p) { }
        });
        $(".enterprise_tcdPageCode").createPage({
            pageCount: 4,
            current: 1,
            backFn: function (p) { }
        });
        $(".car_tcdPageCode").createPage({
            pageCount: 4,
            current: 1,
            backFn: function (p) { }
        });

        $(function () {
            $(".tit02Diva a").each(function (index) {
                $(this).on("click", function () {
                    $(".data_map").eq(index).fadeIn().siblings(".data_map").stop().hide();
                    $(this).prev('i').removeClass('i_crlieAction');
                    $(this).siblings('a').prev('i').addClass('i_crlieAction');

                })
            });
            BootstrapTable();
            Echarts();
            $("#fresh_tool").click(function (event) {
                event.stopPropagation();
                cancel();
            })

        });
        function EventClick() {
            $(".check_increase").removeClass("check_increase_act");
            $("#over_hide1").show().siblings().hide();
            $(".check_decrease").show();
            $("#cage_cl").hide();
            $("#map_title_innerbox").hide();
            $("#cage_cl1").show();
            //        $("#over_hide").show();
            $("#map_title_innerbox1").show();
            $(".addition_check_in").hide();
            $("#car_check_in").hide();
            BootstrapTable();
        }
        function cancel(e) {
            $(".check_increase").removeClass("check_increase_act");
            $("#over_hide").show().siblings().hide();
            $(".check_decrease").show();
            $("#cage_cl").show();
            $("#cage_cl1").hide();
            //        $("#cage_cl").show();
            //        $("#over_hide1").show();
            //        $("#map_title_innerbox").show();
            BootstrapTable();
        }

        //    地址检索
        $(".addition_check_btn").click(function () {
            $(".check_increase").addClass("check_increase_act");
            $(".check_decrease").hide()
            $(".addition_check_in").show().siblings().hide()
        });

        //    危化品检索
        function chemistryCheck() {
            $(".check_increase").addClass("check_increase_act");
            $(".check_decrease").hide()
            $("#chemistry_check_in").show().siblings().hide()
        }

        //    企业检索
        function enterpriseCheck() {
            $(".check_increase").addClass("check_increase_act");
            $(".check_decrease").hide()
            $("#enterprise_check_in").show().siblings().hide()
        }

        //    车辆检索
        function carCheck() {
            $(".check_increase").addClass("check_increase_act");
            $(".check_decrease").hide()
            $("#car_check_in").show().siblings().hide()
        }

        function BootstrapTable() {
            $('#table').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/DGCar.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: number,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams: null,
                columns: [
    //                {
    //                    title: "车辆编号",
    //                    field: 'id',
    //                    width:80,
    //                    align: 'center',
    //                    valign: 'middle'
    //                },
                    {
                        title: '车牌号',
                        field: 'carno',
                        width: 80,
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '所属企业',
                        field: 'company',
                        align: 'center',
                        valign: 'middle'
                    },

                    {
                        title: '运输内容',
                        field: 'content',
                        align: 'center'
                    },

                    {
                        title: '行驶速度',
                        field: 'speed',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '车辆载重',
                        field: 'load',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '操作',
                        field: 'load',
                        align: 'center',
                        formatter: function (value, row) {
                            var e = '<a  href="javascript:void(0)" title="" onclick="showCarDetai()">查看详情</a> ';
                            var d = '<a  href="javascript:void(0)" title="" onclick="analiysis(\'' + row.id + '\')">车辆定位</a> ';
                            return e + d;
                        }
                    }

                ]
            });
            $('#table1').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/note1.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: number,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams: null,
                columns: [
                    {
                        title: "威胁源",
                        field: 'id',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '辐射距离',
                        field: 'title',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '威胁范围',
                        field: 'type',
                        align: 'center',
                        valign: 'middle'
                    },

                    {
                        title: '危害类型',
                        field: 'person',
                        align: 'center'
                    }

                ]
            });
            $('#table2').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/note2.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: number,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams: null,
                columns: [
                    {
                        title: "威胁源",
                        field: 'id',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '辐射距离',
                        field: 'title',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '威胁范围',
                        field: 'type',
                        align: 'center',
                        valign: 'middle'
                    },

                    {
                        title: '危害类型',
                        field: 'person',
                        align: 'center'
                    }

                ]
            });
        }

        function Echarts() {
            var myChart = echarts.init($("#container_huan")[0]);
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['民用爆炸', '射钉器材', '危化品', '寄递物流', '旅店'],
                    textStyle: {
                        color: "#e9ebee"
                    }
                },
                series: [
                    {
                        name: '行业数据',
                        type: 'pie',
                        center: ['80%', '50%'],
                        radius: ['50%', '80%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            { value: 335, name: '民用爆炸' },
                            { value: 310, name: '射钉器材' },
                            { value: 234, name: '危化品' },
                            { value: 135, name: '寄递物流' },
                            { value: 1548, name: '旅店' }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }


        function TimeControl() {
            $(".message_scroll_box").animate({ marginTop: 96 }, 800,
                    function () {
                        $(".message_scroll_box").css({ marginTop: 0 });    //把顶部的边界清零
                        $(".message_scroll_box .message_scroll:first").before($(".message_scroll_box .message_scroll:last"));    //在第一个新闻后面插入最后一个新闻

                    });
        }
        var T = setInterval(TimeControl, 2300);    //开始定时
        $(".message_scroll_box").mouseenter(function () {
            clearInterval(T);    //停止定时
        })
                .mouseleave(function () {
                    T = setInterval(TimeControl, 2500);    //再次定时
                })

    </script>

    <!--轨迹回放时间日期选择-->
    <script>
        !function () {
            laydate.skin('danlan');//切换皮肤，请查看skins下面皮肤库
            laydate({ elem: '#demo' });
            laydate({ elem: '#demo1' });//绑定元素
        }();
        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD',
            min: laydate.now(),
            max: '2099-06-16',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，充值开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
        function edit() {
            layer.open({
                type: 2,
                title: '存储详情',
                shade: 0.5,
                skin: 'layui-layer-rim',
                area: ['700px', '400px'],
                shadeClose: true,
                closeBtn: 1,
                content: 'saveFindTail.html'
            });
        }
    </script>
    <!--这行代码可以删除-->
    <a style="display:none" href="http://www.bootstrapmb.com">bootstrap模板库</a>

    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      
    </script>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      
    </script>
    </body>
</html>
